import React from "react"
import {
  View,
  Swiper,
  SwiperItem,
  Image,
  Text
} from "@remax/wechat"

export default () => {

  const headerSwiperList = [
    { id: 1, img: 'https://s1.ax1x.com/2021/12/10/oIiX3q.jpg' },
    { id: 2, img: 'https://s1.ax1x.com/2021/12/10/oIiX3q.jpg' }
  ]

  const headerNavList = [
    { id: 1, title: '学生会', bg: 'https://s1.ax1x.com/2021/12/10/oIAkX6.png' },
    { id: 2, title: '社团', bg: 'https://s1.ax1x.com/2021/12/10/oIAi11.png' },
    { id: 3, title: '二手交易', bg: 'https://s1.ax1x.com/2021/12/10/oIAEnK.png' }
  ]

  const recommendList = [
    { id: 1, title: '最适合拍照的地方', num: '45', img: 'https://s1.ax1x.com/2021/12/10/oIeCVK.jpg' },
    { id: 2, title: '最适合约会的地方', num: '5', img: 'https://s1.ax1x.com/2021/12/10/oIekPe.png' },
    { id: 3, title: '我们要毕业了', num: '8', img: 'https://s1.ax1x.com/2021/12/10/oIePUO.png' },
    { id: 4, title: '哪个食堂饭菜好吃', num: '300', img: 'https://s1.ax1x.com/2021/12/10/oIepb6.jpg' }
  ]

  const RecommendItem = ({ props }) => {
    return (
      <View className="cl_rest_recommend_item">
        <Image src={props.img} mode="widthFix" />
        <Text>{props.title}</Text>
        <Text>话题{props.num}</Text>
      </View>
    )
  }

  return (
    <View className="cl_rest">
      <Swiper
        className="cl_rest_header"
        indicatorDots={true}
        autoplay={true}
        indicatorActiveColor='#fff'
      >
        {
          headerSwiperList.map(item => {
            return <SwiperItem key={item.id} ><Image src={item.img} mode="widthFix" /></SwiperItem>
          })
        }
      </Swiper>
      <View className="cl_rest_nav">
        <View className="cl_rest_nav_top">
          {
            headerNavList.map(item => {
              return <Image key={item.id} src={item.bg} mode="widthFix" />
            })
          }
        </View>
        <Image className="cl_rest_nav_bottom" src="https://s1.ax1x.com/2021/12/10/oIEIRs.png" mode="widthFix" />
      </View>
      <View className="cl_rest_recommend">
        <Text>每日推荐</Text>
        <View className="cl_rest_recommend_items">
          {
            recommendList.map(item => {
              return <RecommendItem key={item.id} props={{ title: item.title, img: item.img, num: item.num }} />
            })
          }
        </View>
      </View>
    </View>
  )
}